<template>
  <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
    <view class="one-lists">
      <template v-for="(item, index) in lists">
        <view class="item-one" v-if="selectIndex == index" :key="index">
          <view class="two-lists">
            <template v-if="item.sons">
              <view class="item-two" v-for="(sitem, sindex) in item.sons" :key="sindex">
                <router-link
                  :to="{
                    path: '/bundle2/pages/goods_search/goods_search',
                    query: {
                      id: sitem.id,
                      name: sitem.name,
                    },
                  }"
                >
                  <view class="title flex row-between">
                    <text class="name bold sm">{{ sitem.name }}</text>
                    <u-icon name="arrow-right"></u-icon>
                  </view>
                </router-link>
                <template v-if="sitem.sons">
                  <slot :lists="sitem.sons" :na="sitem.name"></slot>
                </template>
              </view>
            </template>
          </view>
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<script>
export default {
  inject: ["self"],
  props: {},
  data() {
    return {};
  },
  methods: {},
  computed: {
    lists() {
      return this.self.lists;
    },
    selectIndex() {
      console.log(this.self.selectIndex);
      return this.self.selectIndex;
    },
  },
};
</script>

<style lang="scss" scoped>
.one-lists {
  padding: 20rpx;

  .item-one {
    .item-two {
      &:not(:last-of-type) {
        margin-bottom: 20rpx;
      }

      .title {
        background: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
      }
    }
  }
}
</style>
